<template>
  <div style="background:#f6f6f6;height: 100vh;width: 100vw;" >
    <van-row style="color: #fff;background: #f862a0;height: 1.2rem;justify-content: center;align-items: center;padding: 0 0.3rem;">
      <van-col :span="24" style="font-size: 0.4rem;font-weight: 600;">
        <van-icon name="arrow-left" style="margin-right: 0.3rem;" @click="back" />注册
      </van-col>
    </van-row>
    <van-row style="height: 3.4rem;justify-content: center;">
      <img src="../assets/img/bilibili-bg.jpg" alt="" style="height: 100%;">
    </van-row>
    <div>
      <van-field v-model="tel" type="tel" label="+86" clearable="true" placeholder="请输入手机号">
        <template #button>
          <span>
            <span style="color: #f862a0;" @click="getVerify" v-show="switchVerify" >获取验证码</span>
            <span v-show="!switchVerify" style=""><van-count-down :time="time" format="ss s" @finish="finish" /></span>            
          </span>
        </template>
      </van-field>

      <van-field v-model="verify" type="tel" label="验证码" clearable="true" placeholder="请输入验证码"></van-field>
      <van-field v-model="password" type="password" label="密码" clearable="true" placeholder="请输入密码"></van-field>
      <van-field v-model="name" type="text" label="昵称" clearable="true" placeholder="请输入昵称"></van-field>

    </div>
    <van-row style="padding: 0.6rem;">
      <van-button block style="border-radius: 10rem;background: #f862a157;color: #fff;" :class="{ back :buttonClass}" @click="register">注册</van-button>
    </van-row>
  </div>
</template>
<style lang="less" scoped>
.van-field{
  border-top: 1px solid #eee;
}
.back{
  background: #f862a1 !important
}
.van-field__button{
  padding: 0px;
}
</style>

<script setup>
import axios from '../api/index.js'
import { computed,ref } from 'vue';
import { showFailToast,showSuccessToast } from 'vant'
import { useRouter } from 'vue-router';

const router = new useRouter()

let tel = ref('')
let verify  = ref('')
let password = ref('')
let name = ref('')
let buttonClass = computed(() =>{
  if(tel.value.length>0 && verify.value.length>0 && password.value.length>0 && name.value.length>0){
    return true
  }
  return false
})

let switchVerify= ref(true)
let time = computed(() =>{
  if(!switchVerify.value){
    return 60 * 1000
  }
})

const finish = () =>{
  switchVerify.value = true
}

const getVerify = () =>{
  // if(tel.value.length===11){
    showSuccessToast('发送成功')
    verify.value = '000000'
    switchVerify.value =false
    return
  // }
  // showFailToast('手机格式错误');
}

const back = () =>{
  router.push('./login')
}

const register = async () =>{
  if(tel.value.length>0 && verify.value.length>0 && password.value.length>0 && name.value.length>0){
    const res = await axios.post('/register',{
      number:tel.value,
      password:password.value,
      name:name.value
    })
    console.log(res);
    if(res.state){
      showSuccessToast(res.msg)
      router.push('./login')
    }
    else{
      showFailToast(res.msg)
    }
  }
  else{
    showFailToast('请补全信息')
  }
}
</script>
